<template>
  <div>
    <el-tabs style="position: relative;width: 80%;left:120px" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first" @click="getAll">
        <el-table
            height="490"
            :data="dataList"
            border
            stripe
            style="">
          <el-table-column
              prop="id"
              label="标号"
              width="60">

          </el-table-column>
          <el-table-column
              prop="image"
              label="上传图片"
              width="150">
            <template slot-scope="scope">
              <el-image
                  style="width: 100px; height: 100px"
                  @click="push(scope.row.image)"
                  :src="scope.row.image"
                  :preview-src-list="srcList"
                 ></el-image>
            </template>
          </el-table-column>

          <el-table-column
              prop="email"
              width="257"
              label="邮箱">
          </el-table-column>
          <el-table-column
              prop="accept"
              width="150"
              label="评价">
            <template slot-scope="scope">
              <label v-if="scope.row.accept==='IS_RIGHT'" style="color:#6dab5e ">好评</label>
              <label v-if="scope.row.accept==='IS_ERROR'" style="color:#a83939 ">差评</label>
              <label v-if="scope.row.accept==='NO_COMMENT'" style="color:rgba(2,1,1,0.85) ">无评价</label>
            </template>
          </el-table-column>
          <el-table-column
              prop="accuracy"
              width="120"
              label="准确率">
          </el-table-column>
          <el-table-column
              prop="category"
              width="150"
              label="垃圾类别">
          </el-table-column>


        </el-table>
      </el-tab-pane>

      <el-tab-pane label="好评" name="second">
        <el-table
            height="490"
            :data="dataList0"
            border
            stripe
            style="">
          <el-table-column
              prop="id"
              label="标号"
              width="60">

          </el-table-column>
          <el-table-column
              prop="image"
              label="上传图片"
              width="150">
            <template slot-scope="scope">
              <el-image
                  style="width: 100px; height: 100px"
                  @click="push(scope.row.image)"
                  :src="scope.row.image"
                  :preview-src-list="srcList"
                  ></el-image>
            </template>
          </el-table-column>

          <el-table-column
              prop="email"
              width="257"
              label="邮箱">
          </el-table-column>
          <el-table-column
              prop="accept"
              width="150"
              label="评价">
            <template slot-scope="scope">
              <label v-if="scope.row.accept==='IS_RIGHT'" style="color:#6dab5e ">好评</label>
              <label v-if="scope.row.accept==='IS_ERROR'" style="color:#a83939 ">差评</label>
              <label v-if="scope.row.accept==='NO_COMMENT'" style="color:rgba(2,1,1,0.85) ">无评价</label>
            </template>
          </el-table-column>
          <el-table-column
              prop="accuracy"
              width="120"
              label="准确率">
          </el-table-column>
          <el-table-column
              prop="category"
              width="150"
              label="垃圾类别">
          </el-table-column>


        </el-table>
      </el-tab-pane>
      <el-tab-pane label="差评" name="third">
        <el-table
            height="490"
            :data="dataList1"
            border
            stripe
            style="">
          <el-table-column
              prop="id"
              label="标号"
              width="60">

          </el-table-column>
          <el-table-column
              prop="image"
              label="上传图片"
              width="150">
            <template slot-scope="scope">
              <el-image
                  style="width: 100px; height: 100px"
                  @click="push(scope.row.image)"
                  :src="scope.row.image"
                  :preview-src-list="srcList"
                  ></el-image>
            </template>
          </el-table-column>

          <el-table-column
              prop="email"
              width="257"
              label="邮箱">
          </el-table-column>
          <el-table-column
              prop="accept"
              width="150"
              label="评价">
            <template slot-scope="scope">
              <label v-if="scope.row.accept==='IS_RIGHT'" style="color:#6dab5e ">好评</label>
              <label v-if="scope.row.accept==='IS_ERROR'" style="color:#a83939 ">差评</label>
              <label v-if="scope.row.accept==='NO_COMMENT'" style="color:rgba(2,1,1,0.85) ">无评价</label>
            </template>
          </el-table-column>
          <el-table-column
              prop="accuracy"
              width="120"
              label="准确率">
          </el-table-column>
          <el-table-column
              prop="category"
              width="150"
              label="垃圾类别">
          </el-table-column>


        </el-table>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import {getAllData, getAllUsers, getDataByStatus, getOrdersByStatus} from "@/api/api";

export default {

  name: "data",
  data() {
    return {
      activeName: 'first',
      dataList: [],
      dataList0: [],
      dataList1: [],
      srcList: [],
      image: '',


    }
  },
  mounted() {
    this.getAll();
  },
  methods: {
    push(i) {
      this.srcList.push(i);
    },
    getAll() {
      // let data = {'accept': 'IS_RIGHT'}
      // let data2 = {'accept': 'IS_ERROR'}
      getAllData().then((res) => {
        if (res.data.code === '200') {
          this.dataList = res.data.data;
          console.log(res.data.data);
        } else {
          console.log(res.data.data);
        }
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      });
      getDataByStatus('IS_RIGHT').then((res) => {
        if (res.data.code === '200') {
          this.dataList0 = res.data.data;

        } else {

          console.log(res.data.data);
        }
      }).catch((res) => {

        console.log(res.data.data);
      });
      getDataByStatus('IS_ERROR').then((res) => {
        if (res.data.code === '200') {
          this.dataList1 = res.data.data;

        } else {

          console.log(res.data.data);
        }
      }).catch((res) => {

        console.log(res.data.data);
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  }
}
</script>

<style scoped>

</style>